<template>
  <div>
    <div class="mycontent">
      <div v-show="startObj.ad_url" id="dplayer"></div>
      <div v-show="!startObj.ad_url">暂无封面视频</div>
    </div>
    <div>
      <div class="file-con">
        <el-button :loading="isup" type="success">{{txt}}</el-button>
        <input type="file" ref="file" class="file" @change="upVideo">
      </div>
      <div class="tip">
        请选择要上传的小视频，尺寸：建议******，格式：xxx
      </div>
    </div>
  </div>
</template>

<script>
import {getQiniuToken} from 'api/commonApi'
import {getStartAd, updateStartAd} from 'api/ADmanagementAPI'
import 'dplayer/dist/DPlayer.min.css';
import DPlayer from 'dplayer'
import config from 'api/config'
import * as qiniu from 'qiniu-js'
export default {
  data(){
      return {
        imgUrl: config.imgUrl,
        txt: '上传文件',
        isup: false,
        startObj: {},
        first: true
      }
  },
  methods: {
    initVideo() {
      this.dp = new DPlayer({
          container: document.getElementById('dplayer')
      })
      if(this.startObj.ad_url){
        this.videoChange()
      }
    },
    videoChange(){
      this.dp.switchVideo({
        url: this.imgUrl+this.startObj.ad_url
      })
    },
    upVideo(event){
      var files = event.target.files
      files = Array.from(files)
      files.forEach((file) => {
          if(file.size>100*1024*1024){
            alert('上传文件只能为100M内')
          }else{
            getQiniuToken().then(res => {
              let token = res.rData[0].token
              this.upload(file, file.name, token)
            })
          }
      })
    },
    progress(res){
      this.isup = true
      this.txt = '正在上传' + (res.total.percent.toFixed(2)) + '%'
    },
    handError(err) {
      console.log(err)
      this.isup = false
      this.txt = '继续上传'
      this.$refs.file.value = ''
      this.$message({
        message: '上传出错',
        type: 'success'
      })
    },
    complete(res){
      // 上传文件
      let data = JSON.parse(JSON.stringify(this.startObj))
      data.ad_url = res.key
      updateStartAd(data).then(res => {
        if(res){
          this.$message({
            message: '上传成功',
            type: 'success'
          })
          this._getStartAd()
        }
      })
      this.isup = false
      this.txt = '上传文件'
      this.$refs.file.value = ''
    },
    upload(file, key,token){
      let putExtra ={
        fname: "",
        params: {},
        mimeType: null
      }
      let config = {
        useCdnDomain: true,
        region: null
      }
      var observable = qiniu.upload(file, key, token, putExtra, config)
      observable.subscribe({
        next: this.progress,
        error: this.handError, 
        complete: this.complete
      })
    },
    _getStartAd() {
      getStartAd().then(res => {
        this.startObj = res.rData[0]
        if(this.startObj.ad_url){
          if (this.first) {
            this.first = false
            this.initVideo()
          } else {
            this.videoChange()
          }
        }
      })
    }
  },
  mounted(){
    this._getStartAd()
  }
}
</script>


<style lang="scss" scoped>
.mycontent{
  margin-bottom: 10px;
}
#dplayer{
  height: 390px;
  width: 690px;
}
.file-con{
  position: relative;
  .file{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
  }
}
.tip{
  margin-top: 10px;
  color: #666;
}
</style>
